{% extends 'layout.html' %}
{% load rbac %}

{% block content %}
    <div class="luffy-container">
        {% if search_list %}
            <div style="float: right;margin: 5px 0;">
                <form method="GET" class="form-inline">
                    <div class="form-group">
                        <input class="form-control" type="text" name="q" value="{{ search_value }}" placeholder="关键字搜索">
                        <button class="btn btn-primary" type="submit">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </form>
            </div>
        {% endif %}

        <form method="post">
            {% csrf_token %}

            {% if action_dict %}
                <div style="float: left;margin: 5px 10px 5px 0;">
                    <div class="form-inline">
                        <div class="form-group">
                            <select class="form-control" name="action">
                                <option value="">请选择操作</option>
                                {% for func_name,func_text in action_dict.items %}
                                    <option value="{{ func_name }}">{{ func_text }}</option>
                                {% endfor %}
                            </select>
                            <input class="btn btn-primary" type="submit" value="执行"/>
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="btn-group" style="margin: 5px 0">
                {% if request|has_permission:'user_add' %}
                    <a class="btn btn-primary" href="{% memory_url request 'user_add' %}">
                        <i class="fa fa-plus-square" aria-hidden="true"></i> 添加用户
                    </a>
                {% endif %}

            </div>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>选择</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>级别</th>
                    <th>部门</th>
                    <th>手机</th>
                    {% if request|has_permission:'user_reset_pwd' %}
                        <th>重置密码</th>
                    {% endif %}

                    {% if request|has_permission:'user_edit' or request|has_permission:'user_del' %}
                        <th>操作</th>
                    {% endif %}

                </tr>
                </thead>
                <tbody>
                {% for row in user_queryset %}
                    <tr>
                        <td><input type="checkbox" name="pk" value={{ row.pk }} /></td>
                        <td>{{ row.name }}</td>
                        <td>{{ row.email }}</td>
                        <td>{{ row.get_level_display }}</td>
                        <td>{{ row.depart.title }}</td>
                        <td>{{ row.phone }}</td>
                        {% if request|has_permission:'user_reset_pwd' %}
                            <td>
                                <a href="{% memory_url request 'user_reset_pwd' pk=row.id %}">重置密码</a>
                            </td>
                        {% endif %}

                        {% if request|has_permission:'user_edit' or request|has_permission:'user_del' %}
                            <td>
                                {% if request|has_permission:'user_edit' %}
                                    <a style="color: #333333;" href="{% memory_url request 'user_edit' pk=row.id %}">
                                        <i class="fa fa-edit" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if request|has_permission:'user_del' %}
                                    <a style="color: #d9534f;" href="{% memory_url request 'user_del' pk=row.id %}"><i
                                            class="fa fa-trash-o"></i></a>
                                {% endif %}
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </form>
        <nav>
            <ul class="pagination">
                {{ pager.page_html|safe }}
            </ul>
        </nav>

        <div id="container" style="min-width:400px;height:400px"></div>
        <script>
            var chart = null;
            $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
                chart = Highcharts.chart('container', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: '美元兑欧元汇率走势图'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                            '鼠标拖动可以进行缩放' : '手势操作进行缩放'
                    },
                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    tooltip: {
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%Y-%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    yAxis: {
                        title: {
                            text: '汇率'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, new Highcharts.getOptions().colors[0]],
                                    [1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },
                    series: [{
                        type: 'area',
                        name: '美元兑欧元',
                        data: data
                    }]
                });
            });
        </script>
    </div>
{% endblock %}